<template>
	<view class="brand-discount-container">
		<!-- 头部品牌选择 -->
		<view class="brand-header">
			<gui-select-menu :items="brandItems.map((item) => item.name)" :selectIndex="0" @select="selectBrand"
				fontSize="28rpx" :zIndex="300" isBrandAct></gui-select-menu>
		</view>

		<!-- 主体内容 -->
		<view class="discount-content">
			<!-- 人民线平行线 -->
			<view class="product-section" v-for="item in disCountGoodsList" :key="item.id">
				<view class="product-title">{{ item.goods_name }}</view>
				<view class="product-spec">规格组：{{ item.discount }}</view>

				<view class="discount-row-container">
					<view class="discount-row" style="width: 45%" v-for="(sku, index) in item.goods_sku_discount"
						:key="index">
						<view class="discount-label">折扣{{ index + 1 }}:</view>
						<input v-model="sku.discount" type="digit" class="discount-input" placeholder="请输入" />
					</view>
				</view>
			</view>
		</view>

		<!-- 底部保存按钮 -->
		<view class="save-button" @click="saveDiscount" v-if="checkRoles('wx_discountEdit', 'btn')">保存</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		BrandToGoodsDiscount,
		SaveGoodsDiscount
	} from "@/api/discount";
	import {
		getSupplierBrandList
	} from "@/api/supplier";
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		showToast
	} from "@/utils/helper";
	import cloneDeep from "lodash.clonedeep";
	// 品牌数据
	const brandItems = ref([]);
	const query = ref({
		page: 1,
		limit: 99,
		brand_id: undefined,
	});
	// 品牌选择事件
	const selectBrand = (index) => {
		query.value.brand_id = brandItems.value[index].id;
		getBrandGoodsList();
		// 这里可以根据选择的品牌更新折扣数据
	};
	const disCountGoodsList = ref([]);

	// 获取所有品牌
	const getBrandList = async () => {
		const res = await getSupplierBrandList(query.value);
		brandItems.value = res.map((item) => ({
			id: item.id,
			name: item.name,
		}));
		selectBrand(0);
	};
	// 获取品牌下的商品
	const getBrandGoodsList = async () => {
		const res = await BrandToGoodsDiscount(query.value);
		disCountGoodsList.value.length = 0;
		Object.assign(disCountGoodsList.value, cloneDeep(res.data));
	};

	const saveDiscount = async () => {
		const arr = disCountGoodsList.value.map((item) => item.goods_sku_discount);
		let discount = arr.map((i) => i.filter((c) => c.discount > 0));
		// if (discount.some((i) => i.length === 0))
		// 	return showToast(
		// 		"存在一行折扣为空，至少要填一个折扣,请填写0.1-1的数字,设原价的话请填1"
		// 	);

		await SaveGoodsDiscount({
			goods_sku_discount: discount.filter((c)=>c.length !== 0).flat(),
		});
		await getBrandGoodsList();
		showToast("保存成功");
	};

	onShow(async () => {
		await getBrandList();
	});
</script>

<style scoped>
	.brand-discount-container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #ffffff;
	}

	/* 头部品牌选择 */
	.brand-header {
		border-top: 1px solid #f0f0f0;
		border-bottom: 1px solid #f0f0f0;
	}

	/* 主体内容区域 */
	.discount-content {
		flex: 1;
	}

	/* 产品部分 */
	.product-section {
		margin: 20rpx 0;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #eee;
	}

	.product-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 5rpx;
	}

	.product-spec {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	/* 折扣行 */
	.discount-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.discount-label {
		width: 100rpx;
		font-size: 28rpx;
		color: #333;
	}

	.discount-label-right {
		margin-left: 30rpx;
	}

	.discount-input {
		flex: 1;
		height: 70rpx;
		border: 1px solid #ddd;
		border-radius: 4rpx;
		padding: 0 15rpx;
		font-size: 26rpx;
	}

	/* 底部保存按钮 */
	.save-button {
		height: 100rpx;
		background-color: #1989fa;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
	}

	.discount-row-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-around;
	}
</style>